<template>
	<view>
		<view style="padding: 10px;">
			<view>
				<u-form>
					<u-form-item label="选择日期:"  border-bottom="false" label-width="150"  >
						<u-input v-model="formData.date" @click="show = !show" disabled="true" border="true"  />
					</u-form-item>
					<u-table>
						<u-tr>
							<u-th>警务助理</u-th>
							<u-th>评价结果</u-th>
							<u-th>备注</u-th>
						</u-tr>
						<u-tr v-for="item in list" :key="item.id">
							<u-td>{{item.jwzlMc}}</u-td>
							<u-td >{{getResultLabel(item.result).label}}</u-td>
							<u-td>{{item.mark}}</u-td>
						</u-tr>
					</u-table>
					<u-empty :show="emptyShow" text="暂无评价结果,去添加一条吧" mode="data" icon-size="80"></u-empty>
					<u-form-item label="签名:"  :border-bottom="border_bottom"  label-width="150" />
					<view class="wrapper" v-bind:class="[show ? 'hideSign' : 'showSign']" >
						<view v-if="!hasSign" >
							<view class="handCenter">
								<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
								  @touchend="uploadScaleEnd" @tap="mouseDown" canvas-id="handWriting">
								</canvas>
							 </view>
							<view class="buttons">
								<button @click="retDraw" class="delBtn">重签</button>
								<button @click="subCanvas" :disabled="qmBtn" class="subBtn">完成签名</button>	
							</view>
						</view>
						<view v-if="hasSign" class="showimg">
							<image  :src="signImageURL" mode=""></image>
						</view>
						<u-button @click="doRate()" :disabled="submitBtn" type="primary" class="commitBtn">提交</u-button>
					</view>
				</u-form>
			</view>
			
			
		</view>
		<u-toast ref="uToast" />
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		
		<uni-fab ref="fab" :pattern="pattern" :popMenu="popMenu" :horizontal="horizontal" :vertical="vertical"  @fabClick="fabClick" />
		
		<!-- <sa-hover-menu :isSingle="true" :pagePath="pagePath" :btnTitle="btnTitle"></sa-hover-menu> -->
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import Handwriting from "../../utils/signature.js";
	import { mapState,mapMutations} from 'vuex';
	export default {
		computed:mapState(['user', ]),
		components: {
			uniFab
		},
		data() {
			return {
				submitBtn:false,
				qmBtn:false,
				emptyShow:false,
				border_bottom:false,
				lineColor:'black',
				slideValue:50,
				handwriting:'',
				selectColor:'black',
				color:'',
				signImage: '',
				signImageURL: '',
				isEnd: false , // 是否签名
				hasSign:false,	//是否已存在签名，用于之前已经签过名，后面重新进入
				url: this.$http.config.baseURL+'/sqmjpj/pj',
				show: false,
				mode: 'date',
				popMenu:false,
				horizontal: 'right',
				vertical: 'centerTop',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
				},
				formData: {
					date: this.$util.getNowD(),
					plr: '',
				},
				jwzlIds:[],
				list:[],
				options: {
					jwzls: [],
					results: [{
							value: '1',
							label: '优秀'
						},
						{
							value: '2',
							label: '称职'
						},
						{
							value: '3',
							label: '基本称职'
						},
						{
							value: '4',
							label: '不称职'
						}],
					
				},
			}
		},
		methods:{
			...mapMutations(['updateUserInfo']),
			getList(){
				this.list = [];
				uni.showLoading({
				    title: '加载中'  
				});
				this.formData.plr= this.user.user.id || 'test';
				this.$http.get("/sqmjpj/list",{params:this.formData}).then( res => {
					
					uni.hideLoading();
					let data = res.data.data;
					if(data){
						this.list = data.details;
					}	
					//this.list = res.data.data;
					if(this.list.length>0){
						this.jwzlIds = [];
						for(let jwzl of this.list){
							this.jwzlIds.push(jwzl.jwzl);
						}
						this.emptyShow = false;
					}else{
						this.emptyShow = true;
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: '获取列表失败！',
						type: 'error'
					}) 
				})
				uni.hideLoading();
				
			},
			change(e){
				this.jwzlIds = [];
				this.formData.date  = e.result;
				this.getList();
			},
			fabClick() {
				uni.navigateTo({
					url:'./sqmjpj/sqmjpj_add?jwzlIds='+this.jwzlIds+'&time='+this.formData.date,
				})
			},
			getResultLabel(value){
				return this.options.results.find(item => item.value===value);
			},
			 doRate(){
				if(this.list.length<=0){
				 	this.$refs.uToast.show({
				 		title: '请先添加民警评价信息',
				 		type: 'error'
				 	})
				 	return;
				}
			 	if(!this.signImage){
			 		this.$refs.uToast.show({
			 			title: '请完成签名后提交',
			 			type: 'error'
			 		})
			 		return;
			 	}
			 	var _this = this;
				this.submitBtn = true;
				this.formData.plr = this.user.user.id || 'test';
				console.log(this.$http);
			 	uni.uploadFile({
			 		url:this.url,
			 		filePath:this.signImage,
			 		name:'file',
			 		formData:this.formData,
			 		success: (res) => {
						_this.$refs.uToast.show({
							title: '评价成功',
							type: 'success',
							callback: ()=>{
								_this.$u.route({
									type:'back',
									delta: 1
								})
							}
						})
			 			/* let _data = JSON.parse(res.data).data;
						console.log(_data);
			 			if(_data){
							console.log(_data);
							this.updateUserInfo(userInfo);
			 				
			 			}else{
							_this.submitBtn = false;
						} */
			 		},
			 		fail:(fail) =>{
						_this.submitBtn = false;
						_this.$refs.uToast.show({
							title: '评价失败',
							type: 'error',
						})
			 			console.log(fail);
			 		}
			 	})
			 },
			retDraw() {
				this.qmBtn = false;
			 	this.handwriting.retDraw()
			 	this.signImage = '';
			},
			
			uploadScaleStart(event){
			 	  this.handwriting.uploadScaleStart(event)
			},
			uploadScaleMove(event){
			 	  this.handwriting.uploadScaleMove(event)
			},
			uploadScaleEnd(event){
			 	  this.handwriting.uploadScaleEnd(event)
			 	  this.isEnd = true;
			},
			subCanvas(){
			 	if(!this.isEnd){
			 		this.$refs.uToast.show({
			 			title: '尚未签名，请签名后保存',
			 			type: 'error'
			 		})
			 		return;
			 	}
			 	  this.handwriting.saveCanvas().then(res=>{
					  this.qmBtn = true;
			 		  this.signImage = res;
					  this.$refs.uToast.show({
					  	title: '签名已完成',
					  	type: 'success'
					  })
			 		  console.log(res);
			 	  }).catch(err=>{
			 		  console.log(err);
				});		  
			 	  
			},
			initQm(){
				// 后面判断签名是否存在，存在则显示签名
				if(this.user.user.qmPath){
					this.hasSign = true;							
					this.signImageURL = this.$http.config.uploadPath+this.user.user.qmPath;
				} 
			}
		},
		onLoad() {
			this.handwriting = new Handwriting({
			  lineColor: this.lineColor,
			  slideValue: this.slideValue, // 0, 25, 50, 75, 100
			  canvasName: 'handWriting',
			});
			this.getList();
			this.initQm();
		},
		
	}
</script>

<style scoped>
	.wrapper {
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	  display: flex;
	  align-content: center;
	  flex-direction: column;
	  justify-content: center;
	  font-size: 28upx;
	}
	.handWriting {
	  background: #fff;
	  width: 100%;
	  height: 350upx;
	}
	
	.handCenter {
	  border: 4upx dashed #e9e9e9;
	  flex: 5;
	  overflow: hidden;
	  box-sizing: border-box;
	  width: 90%;
	  margin: 0 auto;
	}
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: space-between;
	}
	.commitBtn{
		margin-top: 15rpx;
	}
	.buttons>button{
		display: inline-block;
		font-size: 30upx;
		height: 80upx;
		
	}
	.delBtn {
	  color: #666;
	}
	.subBtn {
	  background: #008ef6;
	  color: #fff;
	  text-align: center;
	  justify-content: center;
	}
	.showimg{
		border: 4upx solid #e9e9e9;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		background: #eee;
		height: 350upx;
		align-items: center;
		justify-content: center;
	}
	.showimg>image{
		width: 100%;
		height: 100%;	
	}
	.showimg>text{
		font-size: 40upx;
		color: #888;
	}
	.showSign{
		animation: fadeIn .3s;
		display: flex;
	}
	.hideSign{
		animation: fadeOut .3s;
		display: none;
	}
	@keyframes fadeOut{
	 0% {
			opacity: 1;
			transform: translateY(0px);
		}
	 50% {
		opacity: 0.5;
		transform: translateY(5px);
		 }
	 100%{
		
		opacity: 0; 
		transform: translateY(10px);
		}
	}
	@keyframes fadeIn{
	 0% {opacity: 0; transform: translateY(10px);}
	 50% {opacity: 0.5; transform: translateY(5px);}
	 100%{opacity: 1; transform: translateY(0px);}
	}
</style>
